---
id: text_field
title: Text Field
sidebar_label: Text Field
description: Learn how to use Text Field components to let users input, edit, and display text in your application. Includes examples of basic, multiline, and adorned text fields, as well as various sizes.
---

# Text Field Component

Text fields are versatile UI elements that allow users to input, edit, and display text within an application.
They play a crucial role in user interaction, providing a straightforward way for users to enter data, provide
feedback, complete forms, and interact with various interfaces that require text input. Text fields can be used for
short inputs like usernames or passwords, as well as for longer text entries like comments, messages, or
detailed descriptions.

In the context of FireCMS UI, the design principles and components are loosely based on Google's Material Design guidelines. This means that
the text fields in FireCMS benefit from a consistent and user-friendly design language, ensuring a cohesive
look and feel across different web applications. By leveraging these components, developers can quickly build
interactive and visually appealing forms and input areas that enhance user experience and maintain design consistency.

## Usage

To use the `TextField`, import it from your components directory and pass the `value`, `onChange`, and other necessary props to fit your use case.


import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";
import TextFieldBasicDemo from "../../samples/components/text_field/text_field_basic";
import TextFieldBasicSource from "!!raw-loader!../../samples/components/text_field/text_field_basic";
import TextFieldMultilineDemo from "../../samples/components/text_field/text_field_multiline";
import TextFieldMultilineSource from "!!raw-loader!../../samples/components/text_field/text_field_multiline";
import TextFieldSizeDemo from "../../samples/components/text_field/text_field_sizes";
import TextFieldSizeSource from "!!raw-loader!../../samples/components/text_field/text_field_sizes";
import TextFieldAdornmentDemo from "../../samples/components/text_field/text_field_adornment";
import TextFieldAdornmentSource from "!!raw-loader!../../samples/components/text_field/text_field_adornment";

## Basic Text Field

A basic text field with minimal configuration:



<CodeSample>
    <TextFieldBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{TextFieldBasicSource}</CodeBlock>

## Multiline Text Field

A text field that supports multiline inputs, suitable for comments or notes:



<CodeSample>
    <TextFieldMultilineDemo/>
</CodeSample>

<CodeBlock language="tsx">{TextFieldMultilineSource}</CodeBlock>

## Text Field Sizes

Examples of different size options for the text field component:



<CodeSample>
    <TextFieldSizeDemo/>
</CodeSample>

<CodeBlock language="tsx">{TextFieldSizeSource}</CodeBlock>

## Text Field with Adornment

A text field featuring an end adornment for icons, action buttons, or informative text:



<CodeSample>
    <TextFieldAdornmentDemo/>
</CodeSample>

<CodeBlock language="tsx">{TextFieldAdornmentSource}</CodeBlock>

## Text Field Props

The `TextField` component in FireCMS UI is highly customizable through various props.
Below is a comprehensive list of props you can use to tailor the `TextField` to your needs:

- `value`: The current value of the text field. Required.
- `onChange`: Handler function called when the text field value changes. Required.
- `label`: The label displayed above the text field.
- `placeholder`: Placeholder text displayed when the text field is empty.
- `multiline`: If `true`, the text field will allow multiline input. Defaults to `false`.
- `rows`: Specifies the number of visible text lines for a multiline text field.
- `variant`: The variant to use for the text field. Options are `'standard'`, `'outlined'`, or `'filled'`. Defaults to `'standard'`.
- `fullWidth`: If `true`, the input will take up the full width of its container. Defaults to `false`.
- `size`: The size of the text field. Options are `'small'` or `'medium'`. Defaults to `'medium'`.
- `color`: The color of the text field. Options are `'default'`, `'primary'`, or `'secondary'`. Defaults to `'default'`.
- `type`: The type of input element; e.g., `password`, `text`, `number`, `email`, etc. Defaults to `'text'`.
- `disabled`: If `true`, the text field will be disabled. Defaults to `false`.
- `helperText`: Text that appears below the text field.
- `error`: If `true`, the text field will have an error state. Defaults to `false`.
- `startAdornment`: Element to be placed at the start of the text field.
- `endAdornment`: Element to be placed at the end of the text field.
